<template>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        订单管理
        <small>管理您的订单</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-calendar-minus-o"></i> 订单管理</a></li>
        <li><a href="#"> 订单详情</a></li>
        <li class="active">订单内容</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">


          <div class="box" style="background: #efefef">
            <div class="box-header">
              <h3 class="box-title">{{'订单'+this.$route.params.id+'的内容'}}</h3>
            </div>
            <!-- /.box-header -->

            <section class="content">
              <div class="row">
                <div class="col-xs-12">

                  <div v-for="orderProduct in orderProductList" :key="orderProduct.id" class="box box-default"
                       style="border-radius: 15px;position: relative">
                    <img alt="1" src="../../../public/img/boxicon.png"
                         style="width: 60px;margin-left: 10px;margin-top: 10px;border-radius: 5px"/>
                    <span style="margin-left: 10px;font-size: large;font-weight: bold">商品id：{{ orderProduct.id }}</span>
                    <span style="position: absolute;left: 80px;top: 50px">名称：{{ orderProduct.name }}</span>
                    <div style="margin-top: 10px">
                      <span style="margin-left: 15px;margin-top: 10px">单价：{{ orderProduct.price }}元</span>
                      <span style="float: right;margin-right: 18vw;margin-bottom: 10px">总价：{{ orderProduct.sumPrice }}元</span>
                    </div>
                    <div style="margin-top: 10px">
                      <span style="margin-left: 15px;margin-top: 10px">数量：{{ orderProduct.count }}</span>
                      <span style="float: right;margin-right: 16vw;margin-bottom: 10px">状态：{{ orderProduct.status }}</span>
                    </div>
                    <div>&nbsp;</div>
                    <div style="float: right">
                      <el-button style="position: absolute;margin-left: -27vw;margin-top: -140px"
                                 type="danger" :onclick="'deleteOrderProduct('+orderProduct.id+')'">删除<i class="el-icon-delete el-icon--right"></i>
                      </el-button>
                    </div>
                  </div>

                </div>
                <!-- /.col -->
              </div>
              <!-- /.row -->
            </section>
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->

  </div>
  <!-- /.content-wrapper -->
</template>

<script>
export default {
  name: "OrderProductManager",
  data() {
    let index = this.GLOBAL.appData.orderList.findIndex((e)=>{
      return e.id===parseInt(this.$route.params.id);
    });
    return {
      orderIndex: index,
      orderProductList: this.GLOBAL.appData.orderList[index].orderProductList
    }
  },
  methods:{
    deleteOrderProduct(id){
      let index = this.GLOBAL.appData.orderList[this.orderIndex].orderProductList.findIndex((e)=>{
        return e.id===id;
      });
      this.GLOBAL.appData.orderList[this.orderIndex].orderProductList.splice(index,1);
      this.orderProductList = this.GLOBAL.appData.orderList[this.orderIndex].orderProductList;
      this.$message.success('删除成功');
    }
  },
  created() {
    window.deleteOrderProduct = this.deleteOrderProduct;
  },
  mounted() {
    $(document).ready(function () {
      // 选择框
      $(".select2").select2();

      // WYSIHTML5编辑器
      $(".textarea").wysihtml5({
        locale: 'zh-CN'
      });
    });
    // 设置激活菜单
    function setSidebarActive(tagUri) {
      var liObj = $("#" + tagUri);
      if (liObj.length > 0) {
        liObj.parent().parent().addClass("active");
        liObj.addClass("active");
      }
    }


    $(document).ready(function () {
      // 激活导航位置
      setSidebarActive("order-detail");
    });
    $(function() {
      $("#example1").DataTable({
        "language": {
          //"info": "当前第_PAGE_页，共 _PAGES_页",
          "sInfo": "当前显示第 _START_ 到第 _END_ 条，共 _TOTAL_ 条",
          "sInfoFiltered": "(从_MAX_条筛选 )",
          "sInfoEmpty": "共筛选到0条",
          "sSearch": "搜索:",
          "sLengthMenu": "每页显示 _MENU_ 条",
          "sZeroRecords": "未筛选到相关内容",
          "paginate": {
            "sFirst": "首页",  //首页和尾页必须在pagingType设为full_numbers时才可以
            "sLast": "尾页",
            "sPrevious": "上一页",
            "sNext": "下一页",
            "first": "First page",
            "last": "Last page",
            "next": "Next page",
            "previous": "Previous page"
          }
        }
      });
    });
  }
}
</script>

<style scoped>

</style>
